<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
         <script src="../static/assets/js/echarts.min.js"></script>
        <title>微笑基金</title>
        <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
        <link href="../static/assets/css/styles.css" rel="stylesheet" />
        <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
    </head>
    <body class="sb-nav-fixed">
        <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
            <!-- Navbar Brand-->
            <a class="navbar-brand ps-3" href="index.html">Red Fund</a>
            <!-- Sidebar Toggle-->
            <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
            <!-- Navbar-->
            <ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="log">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div id="layoutSidenav">
            <div id="layoutSidenav_nav">
                <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
                    <div class="sb-sidenav-menu">
                        <div class="nav">
                            <div class="sb-sidenav-menu-heading">CORE</div>
                            <a class="nav-link" href="index">
                                <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                                首页
                            </a>
                            <a class="nav-link collapsed" href="gong" >
                                <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                              基金公司
                            </a>
                            <a class="nav-link" href="">
                                <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                                词云
                            </a>
                            <a class="nav-link" href="">
                                <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                                基金排行
                            </a>
                             <a class="nav-link" href="com">
                                <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                                收益计算器
                            </a>
                            <a class="nav-link" href="team">
                                <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                                团队
                            </a>
                        </div>
                    </div>
                    <div class="sb-sidenav-footer">
                        <div class="small">投资有道</div>
                    </div>
                </nav>
            </div>
            <div id="layoutSidenav_content">
                <main>
                    <div class="container-fluid px-4">
                        <h1 class="mt-4">热销</h1>
                        <marquee width = "50%" behavior = "scroll" bgcolor = "yellow">
	                             净值估算数据按照基金历史披露持仓和指数走势估算，仅供参考，实际以基金公司为准。
                         </marquee>
                        <ol class="breadcrumb mb-4">
                            <li class="breadcrumb-item active">大家都在买</li>
                        </ol>
                        <div class="row">
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-primary text-white mb-4">
                                    <div class="card-body">股票基金</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-white stretched-link" href="gup">详情</a>
                                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-warning text-white mb-4">
                                    <div class="card-body">混合型基金</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-white stretched-link" href="hun">详情</a>
                                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-success text-white mb-4">
                                    <div class="card-body">指数型基金</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-white stretched-link" href="zhishu">详情</a>
                                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6">
                                <div class="card bg-danger text-white mb-4">
                                    <div class="card-body">债券型基金</div>
                                    <div class="card-footer d-flex align-items-center justify-content-between">
                                        <a class="small text-white stretched-link" href="zj">详情</a>
                                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                       <h3>基金关键字</h3>
                    <div style="width: 100%;height:270px;margin: 8px auto;border-radius: 20px;
                          box-shadow:inset 0px 0px 20px #fff,
                       -5px 0px 20px rgb(247, 14, 33),
                       0px 5px 20px #000000;">
                        <div style="width: 300px;float: left">
                            <img style="width: 280px;height: 270px" src="../static/assets/img/cloud.jpg">
                        </div>

                        <div id="container" style="width: 630px;height:270px;float: left">
                        </div>
                         <div style="width: 300px;float: left">
                            <img style="width: 280px;height: 270px" src="../static/assets/img/cloud1.jpg">
                        </div>
                    </div>

                                <script type="text/javascript">
                                var dom = document.getElementById("container");
                                var myChart = echarts.init(dom);
                                var app = {};
                                var option;

                            option = {
                                 backgroundColor: '#fff',
                                title: {
                                     text: '各类型股票占比',
                                     left: 'center',
                                     top: 30,
                                      textStyle: {
                                        color: '#000'
                                       }
                                     },
                                 tooltip: {
                              trigger: 'item'
                                 },
                                  visualMap: {
                              show: false,
                             min: 80,
                             max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '45%'],
      data: [
        { value: 295, name: '债券型' },
        { value: 236, name: '股票型' },
        { value: 196, name: '指数型' },
        { value: 322, name: '混合型' }
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(0, 0, 0, 1)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(0, 0, 0, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: '#ffb7dd'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 300;
      }
    }
  ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>


                        <div class="card mb-4">
                            <div class="card-header">
                                <i class="fas fa-table me-1"></i>
                                基金排行
                            </div>
                            <div class="card-body">
                                <table id="datatablesSimple">
                                    <thead>
                                        <tr>
                                            <th>基金代码</th>
                                            <th>基金名称</th>
                                            <th>日期</th>
                                            <th>单位净值</th>
                                            <th>累计净值</th>
                                            <th>日增长率</th>
                                            <th>近一周</th>
                                            <th>近1月</th>
                                            <th>近3月</th>
                                            <th>近6月</th>
                                            <th>近一年</th>
                                             <th>成立时间</th>
                                             <th>手续费</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                          <tr>
                                            <th>基金代码</th>
                                            <th>基金名称</th>
                                            <th>日期</th>
                                            <th>单位净值</th>
                                            <th>累计净值</th>
                                            <th>日增长率</th>
                                            <th>近一周</th>
                                            <th>近1月</th>
                                            <th>近3月</th>
                                            <th>近6月</th>
                                            <th>近一年</th>
                                             <th>成立时间</th>
                                             <th>手续费</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        {% for fund in funds %}
                                           <tr>
                                               <td>{{ fund[0]}}</td>
                                               <td>
                                                <a href="idTable" target="_blank">
                                                {{ fund[1]}}
                                                 </a>
                                               </td>
                                           <td>{{ fund[2]}}</td>
                                           <td>{{ fund[3]}}</td>
                                           <td>{{ fund[4]}}</td>
                                           <td>{{ fund[5]}}</td>
                                           <td>{{ fund[6]}}</td>
                                           <td>{{ fund[7]}}</td>
                                           <td>{{ fund[8]}}</td>
                                           <td>{{ fund[9]}}</td>
                                           <td>{{ fund[10]}}</td>
                                           <td>{{ fund[11]}}</td>
                                           <td>{{ fund[12]}}</td>
                                        </tr>
                                       {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </main>
                <footer class="py-4 bg-light mt-auto">
                    <div class="container-fluid px-4">
                        <div class="d-flex align-items-center justify-content-between small">
                            <div class="text-muted"> &copy; 软件1901第二组</div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="../static/assets/js/scripts.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
        <script src="../static/assets/demo/chart-area-demo.js"></script>
        <script src="../static/assets/demo/chart-bar-demo.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
        <script src="../static/assets/js/datatables-simple-demo.js"></script>
    </body>
</html>
